/*!
 *
 * Copyright 2015 
 * 
 * rewrited by Zhangdi(zhangdiwaa@163.com) and Hanyuping(yuping0713@126.com)
 */
var datajson = [
    {"id": 1, "state": "full", "row": 1, "col": 1 },
    {"id": 2, "state": "full", "row": 1, "col": 2 },
    {"id": 3, "state": "full", "row": 1, "col": 3 },
    {"id": 4, "state": "full", "row": 1, "col": 4 },
    {"id": 5, "state": "full", "row": 1, "col": 5 },
    {"id": 6, "state": "full", "row": 1, "col": 6 },
    {"id": 7, "state": "empty", "row": 2, "col": 1 },
    {"id": 8, "state": "empty", "row": 2, "col": 2 },
    {"id": 9, "state": "full", "row": 2, "col": 3 },
    {"id": 10, "state": "empty", "row": 2, "col": 4 },
    {"id": 11, "state": "empty", "row": 2, "col": 5 },
    {"id": 12, "state": "full", "row": 2, "col": 6 },
    {"id": 13, "state": "full", "row": 3, "col": 1 },
    {"id": 14, "state": "full", "row": 3, "col": 2 },
    {"id": 15, "state": "empty", "row": 3, "col": 3 },
    {"id": 16, "state": "full", "row": 3, "col": 4 },
    {"id": 17, "state": "full", "row": 3, "col": 5 },
    {"id": 18, "state": "full", "row": 3, "col": 6 },
    {"id": 19, "state": "empty", "row": 4, "col": 1 },
    {"id": 20, "state": "full", "row": 4, "col": 2 },
    {"id": 21, "state": "empty", "row": 4, "col": 3 },
    {"id": 22, "state": "empty", "row": 4, "col": 4 },
    {"id": 23, "state": "empty", "row": 4, "col": 5 },
    {"id": 24, "state": "empty", "row": 4, "col": 6 },
    {"id": 25, "state": "full", "row": 5, "col": 1 },
    {"id": 26, "state": "full", "row": 5, "col": 2 },
    {"id": 27, "state": "full", "row": 5, "col": 3 },
    {"id": 28, "state": "full", "row": 5, "col": 4 },
    {"id": 29, "state": "full", "row": 5, "col": 5 },
    {"id": 30, "state": "full", "row": 5, "col": 6 },
    {"id": 31, "state": "empty", "row": 6, "col": 1 },
    {"id": 32, "state": "empty", "row": 6, "col": 2 },
    {"id": 33, "state": "full", "row": 6, "col": 3 },
    {"id": 34, "state": "empty", "row": 6, "col": 4 },
    {"id": 35, "state": "empty", "row": 6, "col": 5 },
    {"id": 36, "state": "full", "row": 6, "col": 6 },
    {"id": 37, "state": "full", "row": 7, "col": 1 },
    {"id": 38, "state": "empty", "row": 7, "col": 2 },
    {"id": 39, "state": "full", "row": 7, "col": 3 },
    {"id": 40, "state": "full", "row": 7, "col": 4 },
    {"id": 41, "state": "full", "row": 7, "col": 5 },
    {"id": 42, "state": "full", "row": 7, "col": 6 },
    {"id": 43, "state": "empty", "row": 8, "col": 1 },
    {"id": 44, "state": "full", "row": 8, "col": 2 },
    {"id": 45, "state": "empty", "row": 8, "col": 3 },
    {"id": 46, "state": "full", "row": 8, "col": 4 },
    {"id": 47, "state": "empty", "row": 8, "col": 5 },
    {"id": 48, "state": "full", "row": 8, "col": 6 }
]

var serialization = Gridster.sort_by_row_and_col_asc(datajson);

$(function () {
    var gridster = $(".lib_gridster1 ul").gridster({
        widget_base_dimensions: [40, 40],
        widget_margins:         [3, 3],
        resize:                 {
            enabled: false
        },
        helper:                 'clone'
    }).data('gridster').disable();

    $.each(serialization, function () {
        if (this.state == "full") {
            var html = '<li class="full" grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        } else {
            var html = '<li grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        }
        gridster.add_widget(html, 1, 1, this.col, this.row);
    });
});

$(function () {
    var gridster = $(".lib_gridster2 ul").gridster({
        widget_base_dimensions: [40, 40],
        widget_margins:         [3, 3],
        resize:                 {
            enabled: false
        },
        helper:                 'clone'
    }).data('gridster').disable();

    $.each(serialization, function () {
        if (this.state == "full") {
            var html = '<li class="full" grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        } else {
            var html = '<li grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        }
        gridster.add_widget(html, 1, 1, this.col, this.row);
    });
});

$(function () {
    var gridster = $(".lib_gridster3 ul").gridster({
        widget_base_dimensions: [40, 40],
        widget_margins:         [3, 3],
        resize:                 {
            enabled: false
        },
        helper:                 'clone'
    }).data('gridster').disable();

    $.each(serialization, function () {
        if (this.state == "full") {
            var html = '<li class="full" grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        } else {
            var html = '<li grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        }
        gridster.add_widget(html, 1, 1, this.col, this.row);
    });
});